<template>
  <div class="detail-all">

    <van-nav-bar
      title="祛痘详细报告"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!---------第一部分：一个综合评分加上右边一个头像--------->
    <div class="detail-header">
      <div>
        <span>{{disease_type}}</span>
      </div>
      <!--      头像-->
      <div>
        <div class="detail-image">
          <img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/>
        </div>
      </div>
    </div>
    <!---------第二部分：分三个模块--------->
    <div class="detail-part1">
      <!----图片展示模块-->
      <div class="title">
        <div class="title1">{{disease_name}}</div>
        <div class="title1-left">{{a_word_level}}</div>

<!--        <van-tag type="success">一般</van-tag>-->
      </div>
      <!----灰色框框-->
      <div class="title-des">
        <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
          <div class="intro-content" :title="disease_introduction" ref="desc">
        <span class="merchant-desc" v-if="disease_introduction">
          {{disease_introduction}}
        </span>
            <div class="unfold" @click="showTotalIntro" v-if="showExchangeButton">
              <p>{{exchangeButton ? '展开' : '收起'}}</p>
            </div>
          </div>
        </div>
      </div>
      <!------检测详情-------->
      <div class="requestpart">
        <van-row >
          <van-col span="2"> <img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/></van-col>
          <span class="request">检测详情</span>
        </van-row>
      </div>
      <div>
        <table class="imagetable" border="0" id="alternatecolor">
          <tr>
            <th>{{sample_variant[0][0]}}</th>
            <th>{{sample_variant[0][1]}}</th>
            <th>{{sample_variant[0][2]}}</th>
            <th>{{sample_variant[0][5]}}</th>
          </tr>
          <tr>
            <td>{{sample_variant[1][0]}}</td>
            <td>{{sample_variant[1][1]}}</td>
            <td>{{sample_variant[1][2]}}</td>
            <td>{{sample_variant[1][5]}}</td>
          </tr>
          <tr>
            <td>{{sample_variant[2][0]}}</td>
            <td>{{sample_variant[2][1]}}</td>
            <td>{{sample_variant[2][2]}}</td>
            <td>{{sample_variant[2][5]}}</td>
          </tr>
        </table>
      </div>
      <!------检测结果分析-------->
      <div class="requestpart">
        <van-row >
          <van-col span="2"> <img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/></van-col>
          <span class="request">检测结果分析</span>
        </van-row>
      </div>
      <!----灰色框框-->
      <div class="title-des">{{sample_variant[1][6]}}</div>
      <!----灰色框框-->
      <div class="title-des">{{sample_variant[2][6]}}</div>
    </div>
    <!---------第二部分2：分三个模块--------->
    <div class="detail-part1-2">
      <!----图片展示模块-->
      <div class="title">
        <div class="title1">{{disease_name1}}</div>
        <div class="title1-left">{{a_word_level1}}</div>
        <!--        <van-tag type="success">一般</van-tag>-->
      </div>
      <!----灰色框框-->
      <div class="title-des">
        <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
          <div class="intro-content" :title="disease_introduction1" ref="desc">
        <span class="merchant-desc" v-if="disease_introduction1">
          {{disease_introduction1}}
        </span>
            <div class="unfold" @click="showTotalIntro" v-if="showExchangeButton">
              <p>{{exchangeButton ? '展开' : '收起'}}</p>
            </div>
          </div>
        </div>
      </div>
      <!------检测详情-------->
      <div class="requestpart">
        <van-row >
          <van-col span="2"> <img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/></van-col>
          <span class="request">检测详情</span>
        </van-row>
      </div>
      <div>
        <table class="imagetable" border="0" id="alternatecolor">
          <tr>
            <th>{{sample_variant[0][0]}}</th>
            <th>{{sample_variant[0][1]}}</th>
            <th>{{sample_variant[0][2]}}</th>
            <th>{{sample_variant[0][5]}}</th>
          </tr>
          <tr>
            <td>{{sample_variant1[1][0]}}</td>
            <td>{{sample_variant1[1][1]}}</td>
            <td>{{sample_variant1[1][2]}}</td>
            <td>{{sample_variant1[1][5]}}</td>
          </tr>
          <tr>
            <td>{{sample_variant1[2][0]}}</td>
            <td>{{sample_variant1[2][1]}}</td>
            <td>{{sample_variant1[2][2]}}</td>
            <td>{{sample_variant1[2][5]}}</td>
          </tr>
        </table>
      </div>
      <!------检测结果分析-------->
      <div class="requestpart">
        <van-row >
          <van-col span="2"> <img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/></van-col>
          <span class="request">检测结果分析</span>
        </van-row>
      </div>
      <!----灰色框框-->
      <div class="title-des">{{sample_variant1[1][6]}}</div>
      <!----灰色框框-->
      <div class="title-des">{{sample_variant1[2][6]}}</div>
    </div>
    <!---------第二部分3：分三个模块--------->
    <div class="detail-part1-2">
      <!----图片展示模块-->
      <div class="title">
        <div class="title1">{{disease_name2}}</div>
        <div class="title1-left">{{a_word_level2}}</div>
        <!--        <van-tag type="success">一般</van-tag>-->
      </div>
      <!----灰色框框-->
      <div class="title-des">
        <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
          <div class="intro-content" :title="disease_introduction2" ref="desc">
        <span class="merchant-desc" v-if="disease_introduction2">
          {{disease_introduction2}}
        </span>
            <div class="unfold" @click="showTotalIntro" v-if="showExchangeButton">
              <p>{{exchangeButton ? '展开' : '收起'}}</p>
            </div>
          </div>
        </div>
      </div>
      <!------检测详情-------->
      <div class="requestpart">
        <van-row >
          <van-col span="2"> <img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/></van-col>
          <span class="request">检测详情</span>
        </van-row>
      </div>
      <div>
        <table class="imagetable" border="0" id="alternatecolor">
          <tr>
            <th>{{sample_variant[0][0]}}</th>
            <th>{{sample_variant[0][1]}}</th>
            <th>{{sample_variant[0][2]}}</th>
            <th>{{sample_variant[0][5]}}</th>
          </tr>
          <tr>
            <td>{{sample_variant2[1][0]}}</td>
            <td>{{sample_variant2[1][1]}}</td>
            <td>{{sample_variant2[1][2]}}</td>
            <td>{{sample_variant2[1][5]}}</td>
          </tr>
        </table>
      </div>
      <!------检测结果分析-------->
      <div class="requestpart">
        <van-row >
          <van-col span="2"> <img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/></van-col>
          <span class="request">检测结果分析</span>
        </van-row>
      </div>
      <!----灰色框框-->
      <div class="title-des">{{sample_variant2[1][6]}}</div>
    </div>
    <!---------第三部分：营养指导-->
    <div class="part2-card">
      <div class="card-title">营养指导</div>
      <div class="reason">您的xxx能力比较强，建议补充xxx营养！！</div>
<!--      放建议补充的维生素食物图片-->
      <div>
        <van-row type="flex" justify="space-between">
<!--          //定义了spacebetween之后不会换行 元素增多了之后会减小两个之间的间距！-->
          <van-col span="3">
            <van-row ><img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/></van-row>
            <van-row>柠檬</van-row>
          </van-col>
          <van-col span="3" offset="2">
            <van-row ><img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/></van-row>
            <van-row>黄瓜</van-row>
          </van-col>
          <van-col span="3" offset="2">
            <van-row ><img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/></van-row>
            <van-row>樱桃</van-row>
          </van-col>
          <van-col span="3" offset="2">
            <van-row ><img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/></van-row>
            <van-row>葡萄</van-row>
          </van-col>
          <van-col span="3" offset="2">
            <van-row ><img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/></van-row>
            <van-row>牛奶</van-row>
          </van-col>
        </van-row>
      </div>
<!--      小灰色方框里面的建议-->
      <div class="instruction-des">
        <div class="des-title">营养强度：<van-rate v-model="value" /></div>
        柠檬中含有。。。。。。。。。可以。。。。。。对身体有益
      </div>
    </div>
    <!---------第四部分：护肤品建议-->
    <div class="part2-card">
      <div class="card-title">护肤品建议</div>
      <div class="suggestion-des">
        <div>您的xxx能力比较强，建议补充xxx营养！！</div>
        <div class="icon"><van-icon name="arrow-down" /></div>
      </div>
      <!--      放列表-->
      <div >
        <ul>
          <!--每个li由图片和文字描述组成-->
          <li>
            <div class="li-span">
              <img src="../../../assets/images/tab-home/home-list1.png"  class="li-img"/>
              <!--文字包括标题和内容概括 整体定义一个margin-->
              <div class="li-font">
                <div class="li-describe">让你秒懂基因，DNA，染色体的关系</div>
              </div>
            </div>
          </li>
          <li>
            <div class="li-span">
              <img src="../../../assets/images/tab-home/home-list2.png"  class="li-img"/>
              <div class="li-font">
                <div class="li-describe">让你秒懂基因，DNA，染色体的关系</div>
              </div>
            </div>
          </li>
          <li>
            <div class="li-span">
              <img src="../../../assets/images/tab-home/home-list3.png"  class="li-img"/>
              <div class="li-font">
                <div class="li-describe">让你秒懂基因，DNA，染色体的关系</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!---------第五部分：按钮-->
<!--    <div class="part5-button">-->
<!--      <van-button type="info" size="large" @click="nextresult">下一项检测结果：保湿</van-button>-->
<!--    </div>-->
  </div>
</template>

<script>
import { NavBar, Toast, Row, Col, Rate, Button, Tag } from 'vant'
export default {
  name: 'seedetail',
  components: {
    [NavBar.name]: NavBar,
    [Row.name]: Row,
    [Col.name]: Col,
    [Rate.name]: Rate,
    [Button.name]: Button,
    [Tag.name]: Tag
  },
  data () {
    return {
      value: 4,
      // title: '演示展开收起',
      // introduce: '',
      // 是否展示所有文本内容
      showTotal: true,
      // 第一个：所有需要显示的数据
      a_word_level: '一般',
      disease_introduction: '',
      disease_name: '抗痤疮能力',
      disease_type: '祛痘',
      sample_variant: [
        [
          '基因',
          'rs编号',
          '基因型',
          '结果评分',
          '人群频率',
          '结果说明',
          '导读'
        ],
        [
          'DDB2',
          'rs747650',
          'T/T',
          '0',
          '0.156315064689',
          '痤疮易感性正常',
          ''
        ],
        [
          'LOC257396',
          'rs38055',
          'G/G',
          '0',
          '0.588247582729',
          '痤疮易感性正常',
          ''
        ]
      ],
      // 第二个的数据
      a_word_level1: '一般',
      disease_introduction1: '维生素A(Vitamin A)在美容方面具有多方面功能：具有调节表皮及角质层新陈代谢，可抗衰老、去皱纹；减少皮脂溢出而使皮肤有弹性，淡化斑点，柔润肌肤；有助于保护表皮、黏膜不受细菌侵害，预防皮肤癌；外用有助于对粉刺、脓包、疖疮、溃疡等皮肤病的治疗；有效预防肥胖，保持女性苗条的身材；有助于防治脱发等。同时过度摄入也会引起头痛、恶心腹泻、肝脾肿大等，需适量摄入。',
      disease_name1: '维生素A水平',
      sample_variant1: [
        [
          '基因',
          'rs编号',
          '基因型',
          '结果评分',
          '人群频率',
          '结果说明',
          '导读'
        ],
        [
          'BCO1',
          'rs7501331',
          'C/C',
          '0',
          '0.718837752649',
          '维生素A吸收能力正常',
          ''
        ],
        [
          'RBP4',
          'rs10882272',
          'T/T',
          '0',
          '0.372373330176',
          '血清中维生素A水平可能正常',
          ''
        ]
      ],
      // 第三个的数据
      a_word_level2: '高',
      disease_introduction2: '维生素B6(Vitamin B6)又称吡哆素，在酵母菌、肝脏、谷粒、肉、鱼、蛋、豆类及花生中含量较多。维生素B6涉及多方面生物功能：参与蛋白质合成与分解代谢，参与所有氨基酸代谢；参与糖异生、脂肪酸代谢；与糖原、神经鞘磷脂和类固醇的代谢有关；参与某些神经介质(5-羟色胺、牛磺酸、多巴胺、去甲肾上腺素和γ-氨基丁酸)合成；参与一碳单位、维生素B12和叶酸盐的代谢。动物缺乏维生素B6的症状为皮炎、痉挛、贫血等。维生素B6长期缺乏会导致皮肤、中枢神经系统和造血系统的损害。',
      disease_name2: '维生素B6水平',
      sample_variant2: [
        [
          '基因',
          'rs编号',
          '基因型',
          '结果评分',
          '人群频率',
          '结果说明',
          '导读'
        ],
        [
          'ALPL',
          'rs4654748',
          'T/T',
          '0',
          '0.140924409201',
          '维生素B6水平可能正常',
          ''
        ]
      ],
      // 显示展开还是收起
      exchangeButton: true,
      // 是否显示展开收起按钮
      showExchangeButton: false,
      rem: ''
    }
  },
  // 生命周期函数
  async created () {
    await this.getOrders()
    // await this.altRows('alternatecolor')
  },
  mounted () {
    // window.onload = function () {
    //   this.altRows('alternatecolor')
    // }
    this.init()
  },
  methods: {
    // 返回上一页的方法
    onClickLeft () {
      this.$router.go(-1)
    },
    nextresult () {
    },
    showTotalIntro () {
      console.log(this.showTotal)
      this.showTotal = !this.showTotal
      this.exchangeButton = !this.exchangeButton
    },
    getRem () {
      console.log('getRem')
      const defaultRem = 16
      let winWidth = window.innerWidth
      console.log('winWidth:' + winWidth)
      let rem = winWidth / 375 * defaultRem
      return rem
    },
    init () {
      this.disease_introduction = '痤疮的发病主要与雄激素、皮脂分泌、毛囊导管口角化和毛囊内微生物相关，还与遗传、免疫等因素有关。此外，饮食、胃肠功能、环境因素、化妆品及精神因素均可诱发和加重痤疮发生。\n痤疮好发于面部、前胸、后背等脂溢出部位，其原发皮损为粉刺，包括白头粉刺(闭合性)和黑头粉刺(开放性)。白头粉刺可挤压出如豆腐渣样物质，黑头粉刺系脂质经空气氧化形成。在粉刺基础上可形成丘疹、脓疱、囊肿、结节，严重的形成瘢痕。'
    }
  },
  watch: {
    'disease_introduction': function () {
      this.$nextTick(function () {
        console.log('nextTick')
        // 判断介绍是否超过四行
        let rem = parseFloat(this.getRem())
        console.log('watch 中的rem', rem)
        if (!this.$refs.desc) {
          console.log('desc null')
          return
        }
        let descHeight = window.getComputedStyle(this.$refs.desc).height.replace('px', '')
        console.log('descHeight:' + descHeight)
        console.log('如果 descHeight 超过' + (5.25 * rem) + '就要显示展开按钮')
        if (descHeight > 5.25 * rem) {
          console.log('超过了四行')
          // 显示展开收起按钮
          this.showExchangeButton = true
          this.exchangeButton = true
          // 不是显示所有
          this.showTotal = false
        } else {
          // 不显示展开收起按钮
          this.showExchangeButton = false
          // 没有超过四行就显示所有
          this.showTotal = true
          console.log('showExchangeButton', this.showExchangeButton)
          console.log('showTotal', this.showTotal)
        }
      }.bind(this))
    }
  }
}
</script>

<style scoped lang="less">
  .detail-all{
    width: 100%;
    height: 100%;
    background-color: #e2e6e536;
    /*头部*/
    .detail-header{
      display: flex;
      justify-content: space-between;
      height: 80px;
      padding: 25px 10px;
      background-color: #1989fa;
      color: white;
      font-size: 17px;
      font-weight: 550;
      border-radius: 0 0 30px 30px;
      .score{
        font-size: 21px;
        margin: 5px;
      }
      .detail-image{
        border-radius: 50px;
      }
    }
    /*抗氧化能力*/
    .detail-part1{
      background-color: white;
      margin: -30px 15px 10px 10px;
      padding: 10px;
      .title{
        display: flex;
        justify-content: space-between;
        padding:10px 10px 50px 10px;
        .title1{
          font-size: 17px;
          font-weight: 550;

        }
        .title1-left{
          font-size: 13px;
          color: white;
          background-color: #06bf04;
          padding: 0 10px;
        }
      }

      /*单个需求模块*/
      .requestpart{
        margin: 30px 0;
        /*需求1*/
        .request{
          margin-left: 5px;
          font-weight: 600;
        }
        .request-des{
          color: #969799;
        }
      }
      .oddrowcolor{
        background-color:#d4e3e5;
      }
      .evenrowcolor{
        background-color:#c3dde0;
      }
      .imagetable {
        width: 100%;
        font-family: verdana,arial,sans-serif;
        font-size:15px;
        color:#333333;
        border-width: 1px;
        border-color: #a9c6c9;
        border-collapse: collapse;
        th {
        color: white;
        background-color: #1989fa;
          border-width: 1px;
          padding: 8px;
          /*标题之间增减一个分割线*/
          /*border-style: solid;*/
        }
        td{
          text-align: center;
          border-width: 1px;
          padding: 8px;
          /*border-style: solid;*/
          border-color: #a9c6c9;;
        }
      }
    }
    .detail-part1-2{
      background-color: white;
      margin: 30px 15px 10px 10px;
      padding: 10px;
      .title{
        display: flex;
        justify-content: space-between;
        padding:10px 10px 50px 10px;
        .title1{
          font-size: 17px;
          font-weight: 550;

        }
        .title1-left{
          font-size: 13px;
          color: white;
          background-color: #06bf04;
          padding: 0 10px;
        }
      }

      /*单个需求模块*/
      .requestpart{
        margin: 30px 0;
        /*需求1*/
        .request{
          margin-left: 5px;
          font-weight: 600;
        }
        .request-des{
          color: #969799;
        }
      }
      .oddrowcolor{
        background-color:#d4e3e5;
      }
      .evenrowcolor{
        background-color:#c3dde0;
      }
      .imagetable {
        width: 100%;
        font-family: verdana,arial,sans-serif;
        font-size:15px;
        color:#333333;
        border-width: 1px;
        border-color: #a9c6c9;
        border-collapse: collapse;
        th {
          color: white;
          background-color: #1989fa;
          border-width: 1px;
          padding: 8px;
          /*标题之间增减一个分割线*/
          /*border-style: solid;*/
        }
        td{
          text-align: center;
          border-width: 1px;
          padding: 8px;
          /*border-style: solid;*/
          border-color: #a9c6c9;;
        }
      }
    }
    .part2-card {
      background-color: white;
      margin: 0 15px 15px 10px;
      padding: 20px 10px;

      .card-title {
        font-weight: 600;
        font-size: 18px;
      }
      .reason{
        margin: 10px 0;
        font-size: 14px;
        color: #969799;
      }
      .instruction-des{
        .title-des;
        margin-top: 20px;
        .des-title{
          color: #666666;
          margin-bottom: 5px;
          display: flex;
        }
        /*评分*/
        .van-icon-star:before {
          color: yellow;
        }
      }
      .suggestion-des{
        .title-des;
        font-size: 15px;
        display: block;
        .icon{
          margin-top: 10px;
          display: flex;
          justify-content: center;
        }
      }
      /*li的span*/
      .li-span{
        width: 100%;
        height: 70px;
        /*li的图片*/
        .li-img{
          float: left;
          width: 20%;
          height: 100%;
        }
        /*li的文字*/
        .li-font{
          /*margin: 8px;*/
          float: right;
          width: 80%;
        }
        .li-describe{
          color: black;
          font-size: 14px;
          margin-bottom: 5px;
          margin-left: 8px;
        }
      }
    }
    /*这是一个在哪都可能用到的通用灰色方块*/
    /*标题下面灰色框框*/
    .title-des {
      margin-bottom: 10px;
      padding: 10px;
      background-color: #e2e6e536;
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
      color:#969799
    }
    .part5-button {
      /*background-color: white;*/
      margin: 0 15px 15px 10px;
      padding: 20px 10px;
    }
  }
  /*点击展开的样式*/
  .total-introduce {
    height: auto;
    overflow: hidden;
    font-size: 14px;
    color: #434343;
    margin: 10px;
    .intro-content {
      .merchant-desc {
        width: 100%;
        line-height: 21px;
      }
    }
    .unfold {
      display: block;
      z-index: 11;
      float: right;
      width: 40px;
      height: 21px;
      p {
        margin: 0;
        line-height: 21px;
        color: #7fbe87;
      }
    }
  }
  .detailed-introduce {
    font-size: 14px;
    color: #434343;
    position: relative;
    overflow: hidden;
    margin: 10px;
    .intro-content {
      // 最大高度设为4倍的行间距
      max-height: 84px;
      line-height: 21px;
      word-wrap: break-word;
      /*强制打散字符*/
      word-break: break-all;
      background: #ffffff;
      /*同背景色*/
      color: #ffffff;
      overflow: hidden;
      .merchant-desc {
        width: 100%;
        line-height: 21px;
      }
      &:after,
        // 这是展开前实际显示的内容
      &:before {
        content: attr(title);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        color: #434343
        // overflow: hidden;
      }
      // 把最后最后一行自身的上面三行遮住
      &:before {
        display: block;
        overflow: hidden;
        z-index: 1;
        max-height: 63px;
        background: #ffffff;
      }
      &:after {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 81px;
        /*截取行数*/
        -webkit-line-clamp: 4;
        text-overflow: ellipsis;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        /*行首缩进字符数，值为[(截取行数-1)*尾部留空字符数]*/
        text-indent: -12em;
        /*尾部留空字符数*/
        padding-right: 4em;
      }
      .unfold {
        z-index: 11;
        width: 40px;
        height: 21px;
        outline: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        p {
          margin: 0;
          line-height: 21px;
          color: #7fbe87;
        }
      }
    }
  }
  .change-buttom {
    font-size: 14px;
    color: #2371be;
    .long {
      /*text-align: 21px;*/
      text-align: center;
      height: 21px;
    }
    .short {
      /*text-align: 21px;*/
      text-align: center;
      height: 20px;
    }
  }
</style>
